<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>购物车</title>
    <style>
      #app{
        width: 500px;
        margin: 0 auto;
        margin-top: 100px;
      }
      table {
        border: 1px solid #e9e9e9;
        border-collapse: collapse;
        border-spacing: 0;
      }

      th,
      td {
        padding: 8px 16px;
        border: 1px solid #e9e9e9;
        text-align: left;
      }

      th {
        background-color: skyblue;
        color: #5c6b77;
        font-weight: 600;
        text-align: center;
      }

      button{
        border-radius: 50%;
        background-color: transparent;
        color: black;
        margin-left: 7px;
        margin-right: 7px;
        font-weight: bold;
        background-color: rgb(207, 238, 144);
       
      }

      .dell{
        border-radius: 10px;
        background-color: transparent;
        color: white;
        background-color: pink;
        border: 1px solid grey;
      }
      .zong{
        margin-left: 160px;
      }
    </style>
    <script src="../vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div v-if="goods.length">
        <!-- v-if 条件为真 元素就会存在，条件为假就不存在 -->
        <table>
          <thead>
            <tr>
              <th>商品名称</th>
              <th>价格</th>
              <th>购买数量</th>
              <th>操作</th>
            </tr>
          </thead>

          <tbody>
            <tr v-for="(item, index) in goods ">  
              <!--tr里面 v-for 遍历goods 数组 ，一个对象生成一行 一行对应一个goods.index-->
              <td>{{item.name}}</td>
              <td>{{item.price}}</td>

              <td>
                <button @click="decrement(index)" >-</button>
                {{item.num}}
                <button @click="increment(index)" >+</button> 
                <!-- 此处的index是实参，vue里的函数的index是形参，从这里传下去 -->
              </td>
              <td>
                <button @click="del(index)" class="dell">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
        <h3 class="zong"><span> 总价格:￥{{totalPrice}}</span> <span>总数量:{{totalNum}}</span></h3>
      </div>
      <h3 v-else>购物车为空</h3> 
      <!-- v-else 对应 v-if的条件。v-if条件为假，else元素就存在，反之就不存在 -->
    </div>


    <script>
      /* 
      1.单个商品购买数量最少为0，最多无限制
      2.总价格和总数量要根据单个商品购买数量动态改变
      3.样式写好看点
      */
      const app = new Vue({
        el: "#app",
        data: {
          goods: [
            {
              id: 1,
              name: "iphonex",
              price: 999.88,
              num: 0,
            },
            {
              id: 2,
              name: "iphone6",
              price: 8999.75,
              num: 0,
            },
            {
              id: 3,
              name: "小米10",
              price: 1323.15,
              num: 0,
            },
            {
              id: 4,
              name: "iphone 14",
              price: 1288.87,
              num: 0,
            },
          ],
          totalNum: 0
        },

        //计算属性
        computed:{
          //写一个总价函数
          totalPrice(){
            //建一个变量为0
            let total = 0
            //遍历数组goods，把里面的每一个对象的当下 价格和数量 相乘，相加到total变量里
            this.goods.forEach(e=> total += e.price*e.num)
            return total.toFixed(2)  //返回计算出来的总价，toFixed取小数点后2位，四舍五入
          }
        },

        //监视属性
        watch:{
          //监视goods数组
          goods:{
            immediate:true, //初始化时，立即执行一次 handler函数
            deep:true,   //深度监视
            handler(value){     //监视数组的值是否被修改，被修改后 返回新的数组和旧的数组
              this.totalNum = 0,   //vue的totalNum属性为0
              value.forEach(e=>this.totalNum += e.num)   //遍历更新后的数组，对象的num值相加 赋值给totalNum属性
            }
          }
        },

        //方法
        methods: {

          //增加的函数
          increment(index) {
            this.goods[index].num++    //点击加号按钮，传入index值，执行该函数，vue的goods数组里对应的index的对象，里面的num值++
          },

          //减少的函数
          decrement(index) {
            //数量为0时不减少
            this.goods[index].num > 0? this.goods[index].num-- : alert('数量最少为0')
            //点击减号按钮，传入index值，执行该函数，判断vue的goods数组里对应的index的对象，里面的num值是否大于0？
            //大于0 执行对应index的num值--，不大于0执行弹窗提醒

          },

          //删除的函数
          del(index) {
            this.goods.splice(index,1)
            //点击删除按钮，传入index值，执行该函数，vue的goods数组执行删除功能splice，括号里index是指goods数组要删除内容的对应index起始值，数量为删除1个,如果不写，页面就会整个数组被删除
          },
        },
      });
    </script>
  </body>
</html>
